<template>
  <div>
    <!--手工原始留数据-->
    <el-button class="main-btn" size="small" style="margin-bottom: 15px" type="primary" @click="handlSAdd">添加数据
    </el-button>
    <el-table :data="tableList" border header-cell-class-name="table-header">
      <el-table-column align="center" fixed="left" label="序号" type="index" width="50" />
      <el-table-column :min-width="180" :show-overflow-tooltip="true" header-align="center" label="终端名称"
        prop="terminalName" />

      <el-table-column :min-width="100" :show-overflow-tooltip="true" align="center" fixed="left" label="终端类型">
        <template #default="{row}">
          {{ getLabel('app_mode', row.terminalType) }}
        </template>
      </el-table-column>

      <el-table-column :min-width="140" :show-overflow-tooltip="true" align="center" :label="trading ?  '配送日期' :'销售日期'">
        <template #default="{row}">
          {{ dateFormat("yyyy-mm-dd", row.directionTime) }}
        </template>
      </el-table-column>

      <el-table-column :min-width="180" :show-overflow-tooltip="true" header-align="center" label="商品名"
        prop="productName" />

      <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="通用名"
        prop="productPopularName" />

      <el-table-column :min-width="180" :show-overflow-tooltip="true" header-align="center" label="生产厂家"
        prop="producer" />

      <el-table-column :min-width="180" :show-overflow-tooltip="true" header-align="center" label="批准文号"
        prop="approvalNumber" />

      <el-table-column :min-width="130" :show-overflow-tooltip="true" align="center" label="包装规格" prop="packSpecs" />

      <el-table-column :min-width="100" :show-overflow-tooltip="true" align="center" label="计价单位" prop="minSaleUnit">
        <template #default="{row}">
          {{ getLabel('sell_unit', row.minSaleUnit) }}
        </template>
      </el-table-column>

      <el-table-column :min-width="120" :show-overflow-tooltip="true" align="center" label="批号" prop="batchNumber" />

      <el-table-column v-if="trading" :min-width="100" align="center" label="营销数量" prop="directionNumber" />

      <el-table-column v-if="trading" :min-width="180" :show-overflow-tooltip="true" header-align="center"
        label="代理名称" prop="agentName" fixed="right" />

      <el-table-column :min-width="140" align="center" label="操作" fixed="right">
        <template #default="scope">
          <el-button type="text" @click="handlEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handlDele(scope.row.id,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <addData ref="addDataDialog" :trading="trading"  @succsess="succsess" />
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  reactive,
  toRefs,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "ManualOriginal",
  components: {
    addData: defineAsyncComponent(() => import("./addData.vue")),
  },
  props: {
    distribute: {
      type: Object,
      default() {
        return {
          distributeName: "",
          distributeId: 0,
          agentName: "",
          agentId: 0,
        };
      },
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    booleTable: {
      type: Boolean,
      default: false,
    },
    trading: {
      type: Boolean,
      default: true,
    },
    emits: ["succsessDate", "succsessDeleteIds"],
  },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    var data = reactive({
      addDataDialog: null,
      objData: [],
      tableList: [],
      aa: [],
      addType:'create',
    });
    const currentInstance = getCurrentInstance();

    const handlSAdd = () => {
       data.addType = 'create'
      data.addDataDialog.open(props.distribute, null);
    };

    const succsess = (val) => {
      console.log(val,"-----");
      if (val?.obj?.id !== 0 ||  data.addType === 'edit') {
        const index = data.tableList.findIndex((a) => a.id === val?.obj?.id);
        if (index !== -1) {
          data.tableList[index] = val?.obj;
        }
      } else {
        if (val?.path === "businessFlow") {
          data.tableList.push(val?.obj);
        }
      }
      var table = {
        tableList: data.tableList,
        id: val?.id,
        path: val?.path,
      };
      context.emit("succsessDate", table);
    };

    const handlEdit = (val) => {
      data.addType = 'edit'
      data.addDataDialog.open(props.distribute, val);
    };

    const handlDele = (id, index) => {
      const arr = [];
      arr.push(id);
      data.tableList.splice(index, 1);
      context.emit("succsessDeleteIds", {
        arr: arr,
        tableList: data.tableList,
      });
    };

    watch(
      () => props,
      (newval, oldval) => {
        if (newval.booleTable) {
          data.tableList = newval.tableData;
        }
      },
      { immediate: true, deep: true }
    );

    return {
      ...toRefs(data),
      handlSAdd,
      succsess,
      handlDele,
      handlEdit,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
